<template>
  <cu-layout ref="layoutRef" navbar="custom" tabbar="/pages/index/index" title="首页">
    <view class="index">
      <view class="index-bg">
        <image style="display: block; width: 100%;" src="@/static/img/index-bg.png" mode="widthFix" />
      </view>
      <view class="index-box">
        <view class="index-user flex">
          <view class="flex-1 flex" @click="openWxAuth">
            <image v-if="wxInfo.headimgurl" class="index-avatar" :src="wxInfo.headimgurl" mode="" />
            <image v-else class="index-avatar" src="/static/img/avatar.png" mode="" />
            <view class="flex-1">
              <view class="user-name">{{ wxInfo.nickname || '微信昵称' }}</view>
              <view class="flex">
                <view class="user-level flex-a">
                  <image class="user-level-icon" src="@/static/img/vip.png" mode="widthFix" />
                  <view class="">一星顾客</view>
                </view>
              </view>
            </view>
          </view>
          <view class="iconfont icon-kefu" @click="layoutRef.openKefu()" />
        </view>
        <view class="px-12 mt-12 relative">
          <view class="card">
            <view class="flex-ba ">
              <view class="">ICCID：{{ agent.iccid || '未绑定' }}</view>
              <view class="flex flex-shrink">
                <view v-if="agent.iccid" class="id-btn" @click="$.router.go('/pages/index/bind')">切换</view>
                <view v-else class="id-btn" @click="$.router.go('/pages/index/bind')">添加</view>
              </view>
            </view>
            <view class="card-data flex-ba">
              <view class="">
                <view class="card-data-label">本月用量</view>
                <view class="card-data-value">{{ agent.flow_today ?? '-' }}<text class="card-data-sign">GB</text></view>
              </view>
              <view class="">
                <view class="card-data-label">套餐总量</view>
                <view class="card-data-value">{{ agent.flow_total ?? '-' }}<text class="card-data-sign">GB</text></view>
              </view>
              <view class="">
                <view class="card-data-label">剩余天数</view>
                <view class="card-data-value">{{ agent.flow_day ?? '-' }}<text class="card-data-sign">天</text></view>
              </view>
            </view>
          </view>
          <view v-if="!agent.id" class="login-popup" @click="openLogin" />
        </view>

        <view class="px-12 mt-12 relative">
          <view class="card card-grid">
            <view class="card-col" @click="$.router.go('/pages/goods/combo')">
              <image class="card-col-img" src="/static/img/index/qianbao.png" mode="widthFix" />
              <view class="">充值缴费</view>
            </view>
            <view class="card-col" @click="onRealName">
              <image class="card-col-img" src="/static/img/index/shiming.png" mode="widthFix" />
              <view class="">
                <text v-if="agent.prod_status_name === '在用'" class="text-primary">已实名</text>
                <text v-else class="">实名认证</text>
              </view>
            </view>
            <view class="card-col" @click="$.router.go('/pages/user/combo', {agentId: agent.id})">
              <image class="card-col-img" src="/static/img/index/quanyi.png" mode="widthFix" />
              <view class="">我的套餐</view>
            </view>
            <view class="card-col" @click="$.router.go('/pages/goods/combo')">
              <image class="card-col-img" src="/static/img/index/dingdan.png" mode="widthFix" />
              <view class="">套餐订购</view>
            </view>
            <view class="card-col" style="position: relative; z-index: 10;" @click.stop="layoutRef.openKefu()">
              <image class="card-col-img" src="/static/img/index/liuyan.png" mode="widthFix" />
              <view class="">投诉建议</view>
            </view>
            <view v-if="isLogin" class="card-col" style="position: relative; z-index: 10;" @click.stop="logout">
              <image class="card-col-img" src="/static/img/index/logout.png" mode="widthFix" />
              <view class="">退出登录</view>
            </view>
          </view>
          <view v-if="!agent.id" class="login-popup" @click="openLogin" />
        </view>

        <view class="p-12" @click="openCombo">
          <image class="index-ad" src="@/static/img/index-ad.png" mode="widthFix" />
        </view>
      </view>
    </view>
  </cu-layout>
</template>

<script setup>
import { ref, computed } from 'vue'
import { onLoad, onPullDownRefresh } from '@dcloudio/uni-app'
import $ from '@/sheep'
import { storeToRefs } from 'pinia'

const useUser = $.store('user')
const agent = computed(() => useUser.agent)
const isLogin = computed(() => useUser.isLogin)
const wxInfo = computed(() => useUser.wxInfo)
const isRealName = ref(false)
const layoutRef = ref(null)

const { authType } = storeToRefs(useUser)

onLoad(async() => {
  uni.hideTabBar()
  await useUser.isReady
  reset()
  // if (agent.value.id) {
  //   onRealName()
  // }
})

// onShow(() => {
//   reset()
// })

onPullDownRefresh(() => {
  reset()
  setTimeout(function() {
    uni.stopPullDownRefresh()
  }, 500)
})

function openLogin() {
  if (!isLogin.value) {
    authType.value = 'smsLogin'
  } else {
    layoutRef.value.openBind()
    // $.router.go('/pages/index/bind')
  }
}

function openCombo() {
  if (!isLogin.value) {
	  authType.value = 'smsLogin'
  } else {
	  $.router.go('/pages/goods/combo')
  }
}

function logout() {
  useUser.clearToken()
  uni.reLaunch({
    url: '/pages/index/index'
  })
}

function reset() {
  if (!agent.value.id) return
  $.get('/user/todayAndUse', { id: agent.value.id }).then(res => {
	  if (res.success) {
	    agent.value.flow_today = res.data.flow_today
	    agent.value.flow_use = res.data.flow_use
	  }
  })
}

function openWxAuth() {
  if (!$.utils.isWx()) {
    return
  }
  if (wxInfo.value?.id) {
    $.utils.showModal({
      title: '获取昵称、头像',
      content: '获取您的微信用户昵称、头像，主要用于完善个人资料以便提供更好使用体验'
    }).then((res) => {
      if (res.confirm) {
        layoutRef.value.wxAuth()
      }
    })
  } else {
    layoutRef.value.wxAuth()
  }
}

function onRealName() {
  if (!agent.value.id) return
  $.get('/user/realName', { id: agent.value.id }).then(res => {
	  if (res.success) {
      isRealName.value = res.data?.status === 1
	    if (res.data.status === 0) {
        $.utils.showModal({
          title: '温馨提示',
          content: 'Wi-Fi网络暂时无法使用，请进行实名认证开通网络!（若已实名成功请耐心等待审核通过）',
          confirmText: '实名认证'
        }).then(re => {
          if (re.confirm) {
            if ($.utils.isH5()) {
              window.location.href = res.data.url
            } else {
              uni.setClipboardData({
                data: res.data.url,
                success() {
                  $.utils.toast('复制成功,请用浏览器访问链接实名')
                }
              })
            }
          }
        })
      }
	  } else {
      $.utils.toast(res.msg)
    }
  })
}

</script>
<style lang="scss" scoped>
.index {
	position: relative;
}
.index-bg {
	position: absolute;
	z-index: 1;
	width: 100%;
	left: 0;
	top: 0;
	background-image: linear-gradient(to bottom, #8494f4 0%,  #b4c0f4 70%, #f5f5f7 100%);
	padding-bottom: 300rpx;
}
.index-box {
	position: relative;
	z-index: 2;
}
.index-user {
	padding: 36rpx;
	.icon-kefu {
		font-size: 48rpx;
		color: #fff;
	}
}
.index-user .flex-1 {
	padding: 0 40rpx;
}
.index-avatar {
	display: block;
	width: 132rpx;
	height: 132rpx;
	border-radius: 50%;
}
.user-name {
	font-size: 36rpx;
	font-weight: bold;
	color: #fff;
	padding: 16rpx 0 10rpx;
}
.user-level {
	font-size: 20rpx;
	height: 36rpx;
	background-image: linear-gradient(to bottom, #999 0%,  #666 100%);
	color: #fff;
	border-radius: 36rpx;
	padding: 0 20rpx;
}
.user-level-icon {
	display: block;
	width: 20rpx;
	height: 18rpx;
	margin-right: 8rpx;
}
.card {
	padding: 36rpx 28rpx;
	border-radius: 12rpx;
	background-color: #fff;
	box-shadow: 0 1px 3px #d9d5d5;
	&.card-grid {
		padding-left: 16rpx;
		padding-right: 16rpx;
	}
}
.id-btn {
	--h: 42rpx;
	background-color: #f4f4f4;
	color: #096dd9;
	font-size: 26rpx;
	height: var(--h);
	line-height: var(--h);
	border-radius: var(--h);
	padding: 0 20rpx;
	margin-left: 16rpx;
}
.card-data {
	text-align: center;
	margin-top: 40rpx;
	padding: 0 12rpx;
}
.card-data-label {
	color: #999;
	font-size: 26rpx;
	margin-bottom: 16rpx;
}
.card-data-value {
	font-size: 30rpx;
	font-weight: bold;
	color: #212121;
}
.card-data-sign {
	margin-left: 2px;
}
.login-popup {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}
.card-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 20rpx;
}
.card-col {
	background-color: #f8faff;
	padding: 16rpx 0;
	text-align: center;
	box-sizing: border-box;
}
.card-col-img {
	display: inline-block;
	width: 60rpx;
	height: 60rpx;
	margin-bottom: 10rpx;
}
.index-ad {
	display: block;
	width: 100%;
}
</style>
